<template>
	<view class="profit">
		<view class="main_body">
			<view class="whole">
				<view>
					<view @tap="overall" :class="{active:!activeV}">
						<text>全部</text>
					</view>
					<view>
						<view class="uni-list-cell-db">
							<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="flexst">
									<view style="font-size:30rpx;" :class="{sensitize:activeV}" class="uni-inputs">
										{{date | DateFiltering}}
									</view>
									<view class="sensitize" :class="{sensitize:activeV}">
										<image src="https://api.myisre.cn/266fb204fc898feae46618edd.png"
											mode="widthFix"></image>
									</view>
								</view>
							</picker>
						</view>
					</view>
				</view>

				<view>
					<text>收入</text>
					<text>{{moneys}}</text>
				</view>
			</view>

			<view class="bulk">
				<view class="item" v-for="item,index in arr" :key="item.id">
					
					<view>
					    <!-- 头像 -->
						<view class="cu-avatar head" :style="{'backgroundImage':'url(http://localhost:8080/'+item.imageUrl+')' }"></view>
						<!-- 概述 -->
						<view class="tea">
							<view class="a1">
								订单编号:{{item.orderId}}
							</view>
							<view class="a2">
								{{
								    item.productName.length > 12
								    ? item.productName.substr(0, 12) + "..."
								    : item.productName
								}}
							</view>
							<view class="a2">
								结算日期：{{item.updatedAt}}
							</view>
						</view>
					</view>
					<view>
						<view class="d1">+{{item.unitPrice*item.quantity}}</view>
					</view>
				</view>
			</view>

			<view class="ticp">已经没有更多数据了哟 ~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				supplierId: uni.getStorageSync('SupplierId'),
				updatedBy: '',
				moneys: 0,
				date: currentDate,
				activeV: false,
				// 数据
				arr: [
				]
			}
		},
		//过滤器
		filters: {
			DateFiltering(value) {
				const date = value.split("-")
				return date[0] + "-" + date[1] 
			}
		},
		onLoad() {
			uni.request({
			    url: 'http://localhost:8080/purchaseOrderDetails/selectSuppliersMoneys', 
				method : 'GET',
				data: {
					supplierId: this.supplierId,
					updatedBy: this.updatedBy,
				},
				success: (res) => {
					res.data.data.forEach(item => {
						this.moneys += item.unitPrice * item.quantity;
					});
					this.arr = res.data.data
				}
			});
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		methods: {
			bindDateChange(e) {
				this.moneys = 0
				this.date = e.target.value;
				uni.request({
				    url: 'http://localhost:8080/purchaseOrderDetails/selectSuppliersMoneys', 
					method : 'GET',
					data: {
						supplierId: this.supplierId,
						updatedBy: e.target.value,
					},
					success: (res) => {
						console.log(res.data.data);
						res.data.data.forEach(item => {
							this.moneys += item.unitPrice * item.quantity;
						});
						this.arr = res.data.data
					}
				});
				this.activeV = true;
			},
			overall() {
				this.moneys = 0
				uni.request({
				    url: 'http://localhost:8080/purchaseOrderDetails/selectSuppliersMoneys', 
					method : 'GET',
					data: {
						supplierId: this.supplierId,
						updatedBy: '',
					},
					success: (res) => {
						res.data.data.forEach(item => {
							this.moneys += item.unitPrice * item.quantity;
						});
						this.arr = res.data.data
					}
				});
				this.activeV = false;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style  lang="scss">
	.main_body {
		padding: 30rpx 24rpx;

		.cu-avatar {
			font-variant: small-caps;
			margin: 0;
			padding: 0;
			display: inline-flex;
			text-align: center;
			justify-content: center;
			align-items: center;
			background-color: #ccc;
			color: #ffffff;
			white-space: nowrap;
			position: relative;
			width: 64upx;
			height: 64upx;
			background-size: cover;
			background-position: center;
			vertical-align: middle;
			font-size: 1.5em;
		}

		.whole {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.flexst {
				display: flex;
				align-items: center;
			}

			.sensitize {
				display: flex;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			&>view:nth-child(1) {
				display: flex;
				align-items: center;

				.active {
					background-color: #4d5eff !important;
					border: 2rpx solid #4d5eff !important;
					color: #fff !important;
				}

				&>view:nth-child(1) {
					width: 140rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 50rpx;
					border: 2rpx solid #e5e5e5;
					color: #666666;
					margin-right: 32rpx;
				}

				.uni-inputs {
					color: #afb0b0;
				}

				.sensitize {
					color: #0256ff !important;
				}

				.icon-xiala {
					color: #afb0b0;
					font-size: 38rpx;
				}
			}

			&>view:nth-child(2) {
				&>text:nth-child(1) {
					margin-right: 8rpx;
				}

				&>text:nth-child(2) {
					font-size: 30rpx;
					font-weight: bold;
					color: #646464;
				}
			}
		}

		.bulk {
			margin-top: 10rpx;
			padding-top: 20rpx;
			background: #ffffff;
			border-radius: 10rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				background: #ffffff;

				&>view:nth-child(1) {
					display: flex;

					.head {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
						border-radius: 10rpx;
					}

					.tea {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.a1 {
							font-size: 30rpx;
						}

						.a2 {
							font-size: 24rpx;
							color: #888;
							margin-top: -10rpx;
						}
					}
				}

				&>view:nth-child(2) {
					height: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.d1 {
						text-align: right;
						color: #FF3E3E;
						font-weight: bold;
						font-size: 32rpx;
					}

					.d2 {
						font-size: 24rpx;
						color: #888;
						margin-top: -10rpx;
					}
				}
			}
		}

		.ticp {
			text-align: center;
			font-size: 26rpx;
			color: #999;
			padding: 30rpx;
		}
	}
</style>